<!-- eslint-disable @typescript-eslint/no-explicit-any -->
<script setup lang="ts">
import { usePostStore } from '@/stores/modules/post'
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus' // 引入消息提示组件
import {
  usePostCommentApi,
  usePostGetCommentByPostIdApi,
} from '@/api/post'
import { useUserStore } from '@/stores'

const userStore = useUserStore()

// 定义 postData 为 ref 类型
const postData = ref<{
  title: string
  username: string
  publishTime: string
  cover: string
  content: string
} | null>(null)

// 定义评论内容
const commentContent = ref('')
// 定义评论列表
const commentList = ref<
  { username: string; content: string }[]
>([])

const route = useRoute()
const postId = route.params.id as unknown as number
const postStore = usePostStore()
const canComment = ref(true)
onMounted(() => {
  const comment = ref([])
  usePostGetCommentByPostIdApi({
    id: postId,
  }).then((res) => {
    comment.value = res.data.data
    console.log(res)
    if (comment.value) {
      for (const item of comment.value as any[]) {
        commentList.value.push({
          username: item.username,
          content: item.userPostComment.content,
        })
      }
    }
  })
  setTimeout(() => {
    console.log(comment.value)
    const post = postStore.getPostById(postId)
    if (post) {
      postData.value = {
        // 若 post.title 不存在，使用默认值
        title: post.post.title || '无标题',
        // 原 post 对象无 username 属性，这里假设使用 userId 关联用户获取用户名，实际需根据业务修改
        username: post.userName || '未知用户',
        // 使用 post.createTime 赋值，若不存在使用默认值
        publishTime: post.post.createTime || '未知时间',
        // 处理 post.pictureBase64 可能为 null 的情况，若为 null 使用默认封面
        cover: post.post.pictureBase64 || '',
        // 若 post.content 不存在，使用默认值
        content: post.post.content || '暂无内容',
      }
      canComment.value = post.post.commentPermission == '0'
    }
  }, 3000)
})

// 处理发布评论
const handlePublishComment = () => {
  if (!userStore.user.id) {
    ElMessage.warning('请先登录后再评论')
    return
  }
  if (!commentContent.value.trim()) {
    ElMessage.warning('请输入评论内容')
    return
  }
  usePostCommentApi({
    postId: postId,
    commentUserId: userStore.user.id,
    content: commentContent.value,
  }).then(() => {
    ElMessage.success('评论成功')
    setTimeout(() => {
      window.location.reload()
    }, 500)
  })
}
</script>

<template>
  <div class="post-detail">
    <!-- 使用 v-if 确保数据加载完成后再渲染 -->
    <div v-if="postData">
      <!-- 显示帖子标题 -->
      <h1 class="title">{{ postData.title }}</h1>
      <!-- 显示用户信息和发布时间 -->
      <div class="user-info">
        <span class="username">{{
          postData.username
        }}</span>
        <span class="publish-time">{{
          postData.publishTime
        }}</span>
      </div>
      <!-- 显示封面图 -->
      <img
        class="cover"
        :src="postData.cover"
        alt="Post Cover"
      />
      <!-- 显示帖子内容 -->
      <v-md-editor
        v-model="postData.content"
        mode="preview"
      ></v-md-editor>
      <!-- 评论列表 -->
      <div class="comment-list">
        <div
          v-for="(comment, index) in commentList"
          :key="index"
          class="comment-item"
        >
          <span class="comment-username">{{
            comment.username
          }}</span>
          <p class="comment-content">
            {{ comment.content }}
          </p>
        </div>
      </div>
      <!-- 评论 -->
      <div class="comment-section" v-if="canComment">
        <el-input
          v-model="commentContent"
          type="textarea"
          :rows="3"
          placeholder="请输入评论内容"
          :disabled="userStore.user.role == ''"
        ></el-input>
        <el-button
          type="primary"
          @click="handlePublishComment"
          style="margin-top: 10px"
          :disabled="userStore.user.role == ''"
        >
          {{
            userStore.user.role == ''
              ? '请先登录'
              : '发布评论'
          }}
        </el-button>
      </div>
      <div v-else>评论已关闭</div>
    </div>
    <div v-else>加载中...</div>
  </div>
</template>

<style lang="scss" scoped>
.post-detail {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.title {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.user-info {
  display: flex;
  gap: 20px;
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

.cover {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 20px;
}

.content {
  font-size: 16px;
  color: #333;
  line-height: 1.6;
}

.comment-list {
  margin-top: 20px;
}

.comment-item {
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.comment-username {
  font-weight: bold;
  color: #333;
  margin-right: 10px;
}

.comment-content {
  color: #666;
}

.comment-section {
  margin-top: 20px;
}
</style>
